<template>
      <div id="vipmanger">
            <page-title><span slot="pageName">会员管理</span></page-title>
                <div class="box">
                        <el-button class="uploadGoods" type="primary" round @click="getAllManger('memzong', 1)">全部</el-button>
                       
                        <el-button class="uploadGoods" type="success" round @click="getAllManger('mempt', 1)">普通会员</el-button>
                        <el-button class="uploadGoods" type="info" round @click="getAllManger('memjgg', 1)">技工</el-button>
                        <el-button class="uploadGoods" type="warning" round @click="getAllManger('memjgs', 1)">企业</el-button>
                        <el-button class="uploadGoods"  round @click="getAllManger('memck', 1)">创客</el-button>
                        <el-button class="uploadGoods"  round type="primary" @click="addMaster()">添加创客</el-button>
                  </div>

            <!-- 表格 -->
              <el-table
                  :data="tableData"
                  style="width: 100%"
                  border
                  :height="height"
                  stripe
                  align="center"
                  :row-class-name="tableRowClassName">
                        <el-table-column
                              prop="userid"
                              align="center"
                              label="会员ID"
                              >
                        </el-table-column>
                        <el-table-column
                              prop="headimgurl"
                              align="center"
                              label="会员头像"
                              width="100px"
                              >
                              <template slot-scope="scope">
                                   <div class="imgbox">
                                         <img class="avatar" :src="scope.row.headimgurl" alt="" width="28" height="28" >
                                   </div>
                              </template>
                        </el-table-column>
                        <el-table-column
                              prop="wnickname"
                              align="center"
                              label="会员昵称">
                        </el-table-column>
                        <el-table-column
                              prop="addtime"
                              align="center"
                              label="注册时间">
                        </el-table-column>
                        <el-table-column
                              prop="phone"
                              align="center"
                              label="联系电话">
                        </el-table-column>

                        <el-table-column prop="cardNum" align="center" label="操作" width="300px">
                              <template slot-scope="scope">
                                    <!-- <el-button
                                    size="mini"
                                    type="primary"
                                    @click="showUser(scope.row.userid)">查看会员</el-button> -->
                                    <el-button
                                    size="mini"
                                    type="danger"
                                    @click="userEdit(scope.row)">修改</el-button>
                                    <el-button
                                    size="mini"
                                    type="success"
                                    @click="showTotal(scope.row)">资金明细</el-button>
                                    <!-- <el-button
                                    size="mini"
                                    type="success"
                                    @click="addMaster(scope.row)">成为创客</el-button> -->
                              </template>
                        </el-table-column>
                  </el-table>
                  <!-- 分页 -->
                  <div class="page">
                        <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :current-page="currentPage"
                        @current-change="pageChange"
                        :total="total">
                        </el-pagination>
                  </div>
            <!-- 编辑用户信息 -->
            <!-- <edit-info :DialogData="DialogData" :FormData="FormData" :disabled="disabled" @update="getAllManger"></edit-info> -->
            <!-- 主动添加创客 -->
            <add-master :addData="addData" :FormData="FormData" @update="getAllManger"></add-master>
            <!-- 查看用户收支明细 -->
            <money-info :DialogData="MoneyDialog" :tableData="MoneyData" :AllMoney="AllMoney"></money-info>
      </div>
</template>

<script>
      import PageTitle from '@/components/PageTitle'
      import EditInfo from "@/components/main/EditInfo"
      import AddMaster from "@/components/dialog/AddMaster"
      import MoneyInfo from "@/components/dialog/MoneyInfo"
      export default {
            data() {
                  return {
                        tableData: [
                              
                        ],
                        pageSize: 10,
                        currentPage: 1,
                        total: 0,
                        DialogData: {
                              show: false,
                        },
                        MoneyDialog: {
                              show: false,
                              title: ""
                        },
                        MoneyData: [],
                        AllMoney: "",
                        addData: {
                              show: false,
                              title: "添加创客"
                        },
                        FormData: {},
                        disabled: {
                              username: true,
                              phone: true,
                              password: true,
                              shopname: true,
                              shopsite: true,
                              shoptime: true,
                        },
                        PostUrl: "memzong",
                  }
            },
            components: {
                  PageTitle,
                  AddMaster,
                  MoneyInfo
            },
            computed: {
                  token() {
                        return localStorage.miniToken 
                  },
                  height() {
                       return this.$store.state.height
                  },
            },
            mounted () {
                  this.getAllManger(this.PostUrl, 1);
                  
            },
            methods: {
                  // 查看店长下级会员
                  showUser( id ) {
                        this.$router.push(`/secondMenber/${id}`)
                  },
                  // 编辑店长资料
                  userEdit( row ) {
                      
                  },
                  tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                              return 'warning-row';
                        } else if (rowIndex === 3) {
                              return 'success-row';
                        }
                              return '';
                  },
                  // memzong 获取所有会员   mempt普通会员   memjgg 技工  memjgs企业   memck创客
                  async getAllManger( url, page ) {
                        this.PostUrl = url
                        let res = await this.$axios.post(`/admin/user/${url}`, { token: this.token, page: page ? page : "1" })
                        this.tableData = res.data.data
                        // console.log(this.tableData);
                        this.total = this.tableData[0].count
                        
                  },
                  // 数据统计
                  async showTotal( row ) {
                        let res = await this.$axios.post(`/admin/user/moneyinfo`, { token: this.token,  signboard: row.signboard })
                        let code = res.data.code
                        if (code == 200) {
                              console.log(res);
                              this.MoneyData = res.data.data.detail
                              this.AllMoney = res.data.data.money
                              this.MoneyDialog = {
                                    show: true,
                                    title: `${row.wnickname}的资金明细`
                              }
                        }
                  },
                  // 添加创客
                  addMaster( user ) {
                        console.log(user);
                        
                        if (user) {
                              this.addData = {
                                    show: true,
                                    title: "添加创客",
                                    hasData: true,
                              }
                              this.FormData = user
                        } else {
                              this.addData = {
                                    show: true,
                                    title: "添加创客",
                                    hasData: false,
                              }
                              this.FormData = {}
                        }
                  },
                  // 页码变化
                  pageChange(e) {
                        console.log(e);
                        this.getAllManger(this.PostUrl, e)
                  }
            },
      }
</script>

<style lang="scss" scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .box {
  width: 100%;
  text-align: left;
  padding-bottom: 30px;
}
 .page {
       padding: 20px;
       text-align: right;
 }
 .imgbox {
       text-align: center;
       width: 100%;
       display: flex;
       justify-content: center;
       .avatar {
            display: block;
            text-align: center;
            width: 28px;
            height: 28px;
            margin: 0;
            padding: 0;
      }
 }
</style>